extends ../_layout

block active
  - sidebar_active = 'blog-article-view.html'

block content
  .content-heading New Article

  .alert.alert-info
    em.fa.fa-exclamation-circle.fa-lg.fa-fw
    span There is an autosaved version of this article that is more recent than the version below. 
      a.text-white(href='#') Restore

  .row
    // Article Content
    .col-lg-9
      .panel.panel-default
        .panel-body
          form(action="")
            input.mb-lg.form-control.input-lg(type="text", name="article-title", placeholder="Article title...")
            // Wysiswyg tooblbar
            .btn-toolbar.btn-editor(data-role='editor-toolbar', data-target='#editor')
              .btn-group.dropdown
                a.btn.btn-default(data-toggle='dropdown', title='Font')
                  em.fa.fa-font
                  b.caret
                ul.dropdown-menu
                  li
                    a(href='', data-edit='fontName Arial', style="font-family:'Arial'") Arial
                  li
                    a(href='', data-edit='fontName Sans', style="font-family:'Sans'") Sans
                  li
                    a(href='', data-edit='fontName Serif', style="font-family:'Serif'") Serif
              .btn-group.dropdown
                a.btn.btn-default(data-toggle='dropdown', title='Font Size')
                  em.fa.fa-text-height
                  | &nbsp;
                  b.caret
                ul.dropdown-menu
                  li
                    a(href='', data-edit='fontSize 5', style='font-size:24px') Huge
                  li
                    a(href='', data-edit='fontSize 3', style='font-size:18px') Normal
                  li
                    a(href='', data-edit='fontSize 1', style='font-size:14px') Small
              .btn-group
                a.btn.btn-default(data-edit='bold', data-toggle="tooltip", title='Bold (Ctrl/Cmd+B)')
                  em.fa.fa-bold
                a.btn.btn-default(data-edit='italic', data-toggle="tooltip", title='Italic (Ctrl/Cmd+I)')
                  em.fa.fa-italic
                a.btn.btn-default(data-edit='strikethrough', data-toggle="tooltip", title='Strikethrough')
                  em.fa.fa-strikethrough
                a.btn.btn-default(data-edit='underline', data-toggle="tooltip", title='Underline (Ctrl/Cmd+U)')
                  em.fa.fa-underline
              .btn-group
                a.btn.btn-default(data-edit='insertunorderedlist', data-toggle="tooltip", title='Bullet list')
                  em.fa.fa-list-ul
                a.btn.btn-default(data-edit='insertorderedlist', data-toggle="tooltip", title='Number list')
                  em.fa.fa-list-ol
                a.btn.btn-default(data-edit='outdent', data-toggle="tooltip", title='Reduce indent (Shift+Tab)')
                  em.fa.fa-dedent
                a.btn.btn-default(data-edit='indent', data-toggle="tooltip", title='Indent (Tab)')
                  em.fa.fa-indent
              .btn-group
                a.btn.btn-default(data-edit='justifyleft', data-toggle="tooltip", title='Align Left (Ctrl/Cmd+L)')
                  em.fa.fa-align-left
                a.btn.btn-default(data-edit='justifycenter', data-toggle="tooltip", title='Center (Ctrl/Cmd+E)')
                  em.fa.fa-align-center
                a.btn.btn-default(data-edit='justifyright', data-toggle="tooltip", title='Align Right (Ctrl/Cmd+R)')
                  em.fa.fa-align-right
                a.btn.btn-default(data-edit='justifyfull', data-toggle="tooltip", title='Justify (Ctrl/Cmd+J)')
                  em.fa.fa-align-justify
              .btn-group.dropdown
                a.btn.btn-default(data-toggle='dropdown', title='Hyperlink')
                  em.fa.fa-link
                .dropdown-menu
                  .input-group.ml-xs.mr-xs
                    input#LinkInput.form-control.input-sm(placeholder='URL', type='text', data-edit='createLink')
                    .input-group-btn
                      button.btn.btn-sm.btn-default(type='button') Add
                a.btn.btn-default(data-edit='unlink', data-toggle="tooltip", title='Remove Hyperlink')
                  em.fa.fa-cut
              .btn-group
                a#pictureBtn.btn.btn-default(data-toggle="tooltip", title='Insert picture (or just drag & drop)')
                  em.fa.fa-picture-o
                input(type='file', data-edit='insertImage', style='position:absolute; opacity:0; width:41px; height:34px')
              .btn-group.pull-right
                a.btn.btn-default(data-edit='undo', data-toggle="tooltip", title='Undo (Ctrl/Cmd+Z)')
                  em.fa.fa-undo
                a.btn.btn-default(data-edit='redo', data-toggle="tooltip", title='Redo (Ctrl/Cmd+Y)')
                  em.fa.fa-repeat
            // Wysiswyg Editor
            .form-control.wysiwyg.mt-lg(style='overflow:scroll; height:250px;max-height:250px') Type something ...

            br
            p Notes
            textarea.mb-lg.form-control(cols="6")
            .clearfix
              .pull-left
                button.btn.btn-default.m-r-10.m-t-10(type="button")
                  em.fa.fa-edit.fa-fw
                  | Draft
                button.btn.btn-primary.m-t-10(type="button")
                  em.fa.fa-check.fa-fw
                  | Save
              .pull-right
                button.btn.btn-danger.m-r-10.m-t-10(type="button")
                  em.fa.fa-trash.fa-fw
                  | Remove
      p.lead List of Comments
      .panel
        .table-responsive
          table.table.table-hover
            thead
              tr
                th
                  strong Comment ID
                th
                  strong Date
                th
                  strong Username
                th
                  strong Comment excerpt
                th.text-center
                  strong Current status
                th.text-right(style="width:130px")
                  strong Actions
            tbody
              tr
                td 123
                td 10/05/2015
                td: a(href="") Jack Jordan
                td Sed quis eros libero, a euismod nisl....
                td.text-center
                  span.label.label-success Approved
                td.text-right
                  button(type="button").btn.btn-sm.btn-default
                    em.fa.fa-pencil
                  button(type="button").btn.btn-sm.btn-danger
                    em.fa.fa-trash
                  button(type="button").btn.btn-sm.btn-success
                    em.fa.fa-check
              tr
                td 456
                td 10/07/2015
                td: a(href="") Hailey Mckinney
                td Nulla facilisi. 
                td.text-center
                  span.label.label-success Approved
                td.text-right
                  button(type="button").btn.btn-sm.btn-default
                    em.fa.fa-pencil
                  button(type="button").btn.btn-sm.btn-danger
                    em.fa.fa-trash
                  button(type="button").btn.btn-sm.btn-success
                    em.fa.fa-check
              tr
                td 789
                td 11/05/2015
                td: a(href="") Peyton Reyes
                td Quisque enim nisi, semper non pulvinar et, aliquam id lorem...
                td.text-center
                  span.label.label-warning Pending
                td.text-right
                  button(type="button").btn.btn-sm.btn-default
                    em.fa.fa-pencil
                  button(type="button").btn.btn-sm.btn-danger
                    em.fa.fa-trash
                  button(type="button").btn.btn-sm.btn-success
                    em.fa.fa-check
              tr
                td 999
                td 10/06/2015
                td: a(href="") Darryl Harper
                td Nulla facilisi. 
                td.text-center
                  span.label.label-danger Rejected
                td.text-right
                  button(type="button").btn.btn-sm.btn-default
                    em.fa.fa-pencil
                  button(type="button", disabled="").btn.btn-sm.btn-danger
                    em.fa.fa-trash
                  button(type="button").btn.btn-sm.btn-success
                    em.fa.fa-check
    // Article sidebar
    .col-lg-3
      .panel.panel-default
        .panel-body
          p.lead Article Data
          
          p Categories
          select.chosen-select.form-control(multiple)
            //- option(value='')
            option coding
            option less
            option sass
            option angularjs
            option node
            option expressJS
          p Tags
          select.chosen-select.form-control(multiple)
            //- option(value='')
            option JAVASCRIPT
            option WEB
            option BOOTSTRAP
            option SERVER
            option HTML5
            option CSS
          p Reviewers
          select.chosen-select.form-control(multiple)
            //- option(value='')
            option adam@email.com
            option amalie@email.com
            option wladimir@email.com
            option samantha@email.com
            option estefanía@email.com
            option natasha@email.com
            option nicole@email.com
            option adrian@email.com

          p.lead SEO Metadata
          .form-group
            p Title 
            input.form-control(type='text', placeholder="Brief description..")
          .form-group
            p Description 
            textarea.form-control(rows='5', placeholder='Max 255 characters...')
          .form-group 
            p Keywords
            textarea.form-control(rows='5', placeholder='Max 1000 characters...')

block vendor_css
  // CHOSEN
  link(rel='stylesheet', href='../vendor/chosen_v1.2.0/chosen.min.css')
block vendor_js
  // CHOSEN
  script(src='../vendor/chosen_v1.2.0/chosen.jquery.min.js')
  // WYSIWYG
  script(src='../vendor/bootstrap-wysiwyg/bootstrap-wysiwyg.js')
  script(src='../vendor/bootstrap-wysiwyg/external/jquery.hotkeys.js')
  // Demo
  script.
    $('.chosen-select').chosen();
    $('.wysiwyg').wysiwyg();
